<style lang="less"scoped="scoped">
	#txt{
			border: .01rem solid;
			background: green;
			width: .8rem;
			text-align: center;
			position: absolute;
			left: 2.52rem;
			font-size: .12rem;
			color: white;
	}
	.entry{
		margin: .3rem .4rem;
		text-align: center;
		input{
			border: none;
			border-bottom: .01rem solid;
			margin-top: .2rem;
			padding: .1rem 0;
			width: 100%;
			background: #EBEBEB;	
		}
		.inp1{
			position: relative;
		}
		

		}
		.login{
		    width: 1.63rem;
		    height: .4rem;
		    background-color: #fe8233;
		    color: #fff;
		    border: none;
		    border-radius: .36rem;
		    margin-top: .45rem;
		    padding: .08rem .12rem;
		    font-size: .15rem;
		}
		.password{
			
			position: absolute;
			top: 2.10rem;
			left: .4rem;
			color: red;
			font-size: .12rem;
		}
	
	
</style>

<template>
	<div id="">
		<p class="entry">
			<input v-model="value" maxlength="11" class="inp1" placeholder="请输入手机号" /><input type="button" v-show="login" @click="getMessage" id="txt" value="发送验证码"/><br />
			<input type="password" maxlength="6" v-model="number" class="inp2"  placeholder="请输入验证码" /><br />
			<span class="password" v-show="open">密码不能为空</span>
			<button class="login" @click="getSignin">登录</button>
		</p>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import md5 from 'js-md5'
	import { ajax,require } from '@/utils'
	export default{
		data(){
			return{
				obj:{},
				value:'',
				number: '',
				open:false,
			}
		},
		
		created(){

		},
		
		computed:{
			...mapGetters(['username','code','isLogin']),
			login(){

				let reg = /^1[34578]\d{9}$/;
				console.log(this.value)
				if(reg.test(this.value)){
					return true

				}else{
					return false
				}
			}
		},
		
		
		methods: {
			
			// 请求验证码
			getMessage(){
				let url = 'https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/code'
				let data={};

				ajax(url,data,(res)=>{
					console.log(res);
					alert('验证码已经发送，请注意查收')
					
				})
			},
			
			
			// 获取登入数据
			getSignin(){
				let url0 = 'https://www.easy-mock.com/mock/5b9624bfe0d1a17c279c8716/films/logiin'
				let data = {
					username:this.username,
					code:md5(this.code)
				}
				console.log(data)
				require(url0,data,(res0)=>{

					this.$store.commit('isLogin',true)
					this.$store.commit('username',res0.name);
					this.$store.commit('code',res0.id);
					if(this.value == ''){
						alert('请输入手机号')
						return;
					}
					else if(this.number == ''){
						this.open = true
						return;
					}
					else{
						this.$router.push({path:'/Person'})
					}
					
					
				})
			},
			
			
		}
	}
</script>
			
			
			
					
				

			
					
					

